<template>
  <div class="layout">
    <Layout>
      <Header class="0000000000000">
        <!-- <Menu mode="horizontal" theme="dark" active-name="1"> -->
        <div class="layout-logo" style="color: #fff">地震应急数据共享平台</div>
        <div class="header-list">
          <Dropdown style="margin-left: 20px">
            <Button type="primary">
              下拉菜单
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem>admin</DropdownItem>
              <DropdownItem>注销</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <!-- <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>Item 1
            </MenuItem>
        </div>-->
        <!-- </Menu> -->
      </Header>
      <Layout style="border-top: 1px solid green">
        <Layout>
          <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
            <Menu
              active-name="1-2"
              theme="dark"
              width="auto"
              :open-names="['1']"
              :class="menuitemClasses"
            >
              <Submenu name="1">
                <template slot="title">
                  <Icon type="ios-navigate"></Icon>
                  <span>地震版本管理</span>
                  <ul class="list-ul-all list-ul-1">
                    <li>地震版本管理</li>
                  </ul>
                </template>
                <MenuItem name="1-1" to="/earthlist">地震版本</MenuItem>
                <MenuItem name="1-2" to="/NewEarthlist">新地震版本</MenuItem>
              </Submenu>

              <Submenu name="2">
                <template slot="title">
                  <Icon type="ios-keypad"></Icon>
                  <span>基础参数设置</span>
                  <ul class="list-ul-all list-ul-2">
                    <li>业务管理</li>
                  </ul>
                </template>
                <MenuItem name="2-1">业务管理</MenuItem>
              </Submenu>

              <Submenu name="3">
                <template slot="title">
                  <Icon type="ios-analytics"></Icon>
                  <span>系统管理</span>
                  <ul class="list-ul-all list-ul-3">
                    <li>角色权限组管理</li>
                    <li>用户管理</li>
                    <li>系统字典管理</li>
                    <li>密码修改</li>
                  </ul>
                </template>
                <MenuItem name="3-1">角色权限组管理</MenuItem>
                <MenuItem name="3-2">用户管理</MenuItem>
                <MenuItem name="3-3">系统字典管理</MenuItem>
                <MenuItem name="3-4">密码修改</MenuItem>
              </Submenu>
            </Menu>
          </Sider>
          <Layout>
            <Header :style="{padding: 0}" class="layout-header-bar">
              <Icon
                @click.native="collapsedSider"
                @click="shrink"
                :class="rotateIcon"
                :style="{margin: '0 20px'}"
                type="md-menu"
                size="24"
              ></Icon>
            </Header>
            <Content :style="{padding: '0 16px 16px'}">
              <Breadcrumb :style="{margin: '2px 0'}">
                <BreadcrumbItem>Home</BreadcrumbItem>
                <BreadcrumbItem>Components</BreadcrumbItem>
                <BreadcrumbItem>Layout</BreadcrumbItem>
              </Breadcrumb>
              <Card>
                <div style="height: 600px"><router-view/></div>
              </Card>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import { setTimeout } from "timers";
import { log } from "util";
import earthlist from "@/components/earthlist.vue";
export default {
  name: "home",
  data() {
    return {
      isCollapsed: false
    };
  },
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  methods: {
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    },
    change() {
      alert("collapsed-menu");
    },
    shrink() {
      let i, j;
      let x = document.getElementsByClassName("ivu-menu-item");
      if (x[0].classList.length == 1) {
        for (i = 0; i < x.length; i++) {
          x[i].classList.add("test");
        }
      } else {
        for (i = 0; i < x.length; i++) {
          x[i].classList.remove("test");
        }
      }
      var y = document.getElementsByClassName("ivu-menu-submenu-title-icon");
      if (y[0].classList.length == 3) {
        for (j = 0; j < y.length; j++) {
          y[j].classList.remove("ivu-icon-ios-arrow-down");
        }
      } else {
        for (j = 0; j < y.length; j++) {
          y[j].classList.add("ivu-icon-ios-arrow-down");
        }
      }
      let a, b, c;
      a = document.getElementsByClassName("ivu-layout-sider");
      b = document.getElementsByClassName("ivu-menu-submenu-title");
      c = document.getElementsByClassName("list-ul-all");
      b[0].onmouseover = function() {
        if (a[0].style.width == "78px") {
          c[0].classList.add("list-ul");
        }
      };
      b[0].onmouseout = function() {
        if (a[0].style.width == "78px") {
          c[0].classList.remove("list-ul");
        }
      };
      b[1].onmouseover = function() {
        if (a[0].style.width == "78px") {
          c[1].classList.add("list-ul");
        }
      };
      b[1].onmouseout = function() {
        if (a[0].style.width == "78px") {
          c[1].classList.remove("list-ul");
        }
      };
      b[2].onmouseover = function() {
        if (a[0].style.width == "78px") {
          c[2].classList.add("list-ul");
        }
      };
      b[2].onmouseout = function() {
        if (a[0].style.width == "78px") {
          c[2].classList.remove("list-ul");
        }
      };
    }
  },
  components: {
    earthlist
  }
};
</script>
<style scoped>
.list-ul-all li:hover {
  background-color: #333844;
}
.header-list {
  position: relative;
  float: right;
  top: -63px;
  z-index: 9999;
}
.list-ul {
  display: block !important;
  cursor: pointer;
}
.list-ul-all {
  display: none;
  position: absolute;
  top: 0;
  right: -130px;
  /* padding-left: 15px; */
  text-align: center;
  width: 130px;
  list-style: none;
  color: white;
  background-color: #515a6e;
}
.list-ul-1 {
  line-height: 50.375px;
  height: 50.375px;
}
.list-ul-2 {
  height: 50.375px;
  line-height: 50.375px;
}
.list-ul-3 {
  height: 201.5px;
  line-height: 50.375px;
}
.test {
  display: none;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}
.menu-icon {
  transition: all 0.3s;
}
.rotate-icon {
  transform: rotate(-90deg);
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
</style>